﻿@page "/tabs"

<h3>Tabs 标签页</h3>

<h4>分隔内容上有关联但属于不同类别的数据集合。</h4>

<p>Tab 组件从设计上采用模板的设计形式，使用本组件时通过将 <code>TabItem</code> 子组件添加到 <code>TabItems</code> 模板中即可</p>

<p>本组件会根据宽度高度等进行自适应适配，适当的时候可以出现左右或者上下的滚动箭头</p>

<Block Title="基础用法" Introduction="基础的、简洁的标签页。" CodeFile="tabs.1.html">
    <Tab>
        <TabItems>
            <TabItem Text="用户管理">
                <div>我是用户管理</div>
            </TabItem>
            <TabItem Text="菜单管理">
                <div>我是菜单管理</div>
            </TabItem>
            <TabItem Text="角色管理">
                <div>我是角色管理</div>
            </TabItem>
            <TabItem Text="部门管理">
                <div>我是部门管理</div>
            </TabItem>
        </TabItems>
    </Tab>
</Block>

<Block Title="选项卡样式" Introduction='通过 <code>IsCard="true"</code> 设置选项卡样式的标签页。' CodeFile="tabs.2.html">
    <Tab IsCard="true">
        <TabItems>
            <TabItem Text="用户管理">
                <div>我是用户管理</div>
            </TabItem>
            <TabItem Text="菜单管理">
                <div>我是菜单管理</div>
            </TabItem>
            <TabItem Text="角色管理">
                <div>我是角色管理</div>
            </TabItem>
            <TabItem Text="部门管理">
                <div>我是部门管理</div>
            </TabItem>
        </TabItems>
    </Tab>
</Block>

<Block Title="卡片化" Introduction='通过 <code>IsBorderCard="true"</code> 设置卡片化的标签页。' CodeFile="tabs.3.html">
    <Tab IsBorderCard="true">
        <TabItems>
            <TabItem Text="用户管理">
                <div>我是用户管理</div>
            </TabItem>
            <TabItem Text="菜单管理">
                <div>我是菜单管理</div>
            </TabItem>
            <TabItem Text="角色管理">
                <div>我是角色管理</div>
            </TabItem>
            <TabItem Text="部门管理">
                <div>我是部门管理</div>
            </TabItem>
        </TabItems>
    </Tab>
</Block>

<Block Title="图标" Introduction='通过设置 <code>TabItem</code> 组件的 <code>Icon</code> 属性对标签页设置图标' CodeFile="tabs.6.html">
    <Tab IsCard="true">
        <TabItems>
            <TabItem Text="用户管理" Icon="fa fa-user">
                <div>我是用户管理</div>
            </TabItem>
            <TabItem Text="菜单管理" Icon="fa fa-dashboard">
                <div>我是菜单管理</div>
            </TabItem>
            <TabItem Text="角色管理" Icon="fa fa-sitemap">
                <div>我是角色管理</div>
            </TabItem>
            <TabItem Text="部门管理" Icon="fa fa-bank">
                <div>我是部门管理</div>
            </TabItem>
        </TabItems>
    </Tab>
</Block>

<Block Title="关闭" Introduction='通过设置 <code>ShowClose</code> 属性对标签页显示关闭按钮' CodeFile="tabs.8.html">
    <Tab IsCard="true" ShowClose="true">
        <TabItems>
            <TabItem Text="用户管理" Icon="fa fa-user">
                <div>我是用户管理</div>
            </TabItem>
            <TabItem Text="菜单管理" Icon="fa fa-dashboard">
                <div>我是菜单管理</div>
            </TabItem>
            <TabItem Text="角色管理" Icon="fa fa-sitemap">
                <div>我是角色管理</div>
            </TabItem>
            <TabItem Text="部门管理" Icon="fa fa-bank">
                <div>我是部门管理</div>
            </TabItem>
        </TabItems>
    </Tab>
</Block>

<Block Title="位置" Introduction="通过设置 <code>Placement</code> 属性更改标签位置，更改为左右时会出现上下滚动小箭头进行 <code>TabItem</code> 切换" CodeFile="tabs.4.html">
    <p class="text-center">
        <div class="btn-group">
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Top)">Top</button>
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Right)">Right</button>
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Bottom)">Bottom</button>
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Left)">Left</button>
        </div>
    </p>
    <Tab Placement="@BindPlacement" Height="200">
        <TabItems>
            <TabItem Text="用户管理">
                <div>我是用户管理</div>
            </TabItem>
            <TabItem Text="菜单管理">
                <div>我是菜单管理</div>
            </TabItem>
            <TabItem Text="角色管理">
                <div>我是角色管理</div>
            </TabItem>
            <TabItem Text="系统日志">
                <div>我是系统日志</div>
            </TabItem>
            <TabItem Text="登录日志">
                <div>我是登录日志</div>
            </TabItem>
            <TabItem Text="定时任务管理">
                <div>我是定时任务管理</div>
            </TabItem>
        </TabItems>
    </Tab>
    <Divider Text="Tab 分割线"></Divider>
    <Tab Placement="@BindPlacement" IsCard="true" Height="200">
        <TabItems>
            <TabItem Text="用户管理">
                <div>我是用户管理</div>
            </TabItem>
            <TabItem Text="菜单管理">
                <div>我是菜单管理</div>
            </TabItem>
            <TabItem Text="角色管理">
                <div>我是角色管理</div>
            </TabItem>
            <TabItem Text="系统日志">
                <div>我是系统日志</div>
            </TabItem>
            <TabItem Text="登录日志">
                <div>我是登录日志</div>
            </TabItem>
            <TabItem Text="定时任务管理">
                <div>我是定时任务管理</div>
            </TabItem>
        </TabItems>
    </Tab>
    <Divider Text="Tab 分割线"></Divider>
    <Tab Placement="@BindPlacement" IsBorderCard="true" Height="200">
        <TabItems>
            <TabItem Text="用户管理">
                <div>我是用户管理</div>
            </TabItem>
            <TabItem Text="菜单管理">
                <div>我是菜单管理</div>
            </TabItem>
            <TabItem Text="角色管理">
                <div>我是角色管理</div>
            </TabItem>
            <TabItem Text="系统日志">
                <div>我是系统日志</div>
            </TabItem>
            <TabItem Text="登录日志">
                <div>我是登录日志</div>
            </TabItem>
            <TabItem Text="定时任务管理">
                <div>我是定时任务管理</div>
            </TabItem>
        </TabItems>
    </Tab>
</Block>

<Block Title="自定义增加标签页触发器" Introduction="通过调用组件 api 动态添加/删除 <code>TabItem</code>" CodeFile="tabs.5.html">
    <p>
        <button type="button" class="btn btn-outline-primary" @onclick="@AddTab">
            <i class="fa fa-plus-circle"></i>
            <span>添加</span>
        </button>
        <button type="button" class="btn btn-outline-danger" disabled="@RemoveEndableString" @onclick="@RemoveTab">
            <i class="fa fa-minus-circle"></i>
            <span>移除</span>
        </button>
    </p>
    <Tab IsBorderCard="true" @ref="TabSet">
        <TabItems>
            <TabItem Text="用户管理">
                <div>我是用户管理</div>
            </TabItem>
            <TabItem Text="菜单管理">
                <div>我是菜单管理</div>
            </TabItem>
            <TabItem Text="角色管理">
                <div>我是角色管理</div>
            </TabItem>
            <TabItem Text="部门管理">
                <div>我是部门管理</div>
            </TabItem>
            <TabItem Text="任务管理">
                <div>我是任务管理</div>
            </TabItem>
        </TabItems>
    </Tab>
</Block>

<Block Title="内置其他组件" Introduction="<code>TabItem</code> 中内置其他组件" CodeFile="tabs.9.html">
    <p>
        <code>Tab</code> 组件各个面板内的内容默认是保持状态的，本例中面板切换时保持原有数据
    </p>
    <Tab IsBorderCard="true">
        <TabItems>
            <TabItem Text="计数组件">
                <Counter></Counter>
            </TabItem>
            <TabItem Text="天气预报">
                <FetchData></FetchData>
            </TabItem>
        </TabItems>
    </Tab>
</Block>

<Block Title="程序动态添加 TabItem 面板" Introduction="通过此功能可以实现侧边栏中点击菜单链接，右侧数据区上部呈现多标签" CodeFile="tabs.7.html">
    <p>
        本例中右侧 <code>Tab</code> 面板内状态一直保持，关闭后重新打开时组件重新加载
    </p>
    <Layout SideWidth="120px" style="min-height: 180px; border: 1px solid #ddd; border-radius: 4px;">
        <Header>
            <div class="header">网站 Header</div>
        </Header>
        <Side>
            <div style="border-right: 1px solid #e6e6e6; height: 100%; overflow: auto; padding: 1rem 0; background-color: #f8f9fa;">
                <Menu Items="@GetSideMenuItems()" IsVertical="true" OnClick="@OnClickMenuItem" />
            </div>
        </Side>
        <Main>
            <div class="tab-main-demo">
                <Tab @ref="TabSetMenu" ShowClose="true">
                    <TabItems>
                    </TabItems>
                </Tab>
            </div>
        </Main>
    </Layout>
</Block>

<AttributeTable Items="@GetAttributes()" />

<MethodTable Items="@GetMethods()" />
